<!--
 * @Descripttion: 
 * @version: 
 * @Author: 程
 * @Date: 2022-12-01 11:32:04
 * @LastEditors: 程
 * @LastEditTime: 2023-04-12 09:03:20
-->
<template>
  <div class="main">
    <h3>{{ $t('tool.directory3') }}</h3>
    <div class="line"></div>
    <div class="card">
      <el-card class="card-item" v-for="item in items.list" :key="item.id" @click="toUrl(item.url)">
        <div class="title">{{ item.text }}</div>
        <img class="logo" :src="item.img" alt="" />
        <div class="intr">{{ item.introduction }}</div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
const items = reactive({
  list: [
    { id: 1, text: 'PP Chart', introduction: '前端Echarts样式大全,前端必备', img: getImageUrl('ppchart'), url: 'http://ppchart.com/#/' },
    { id: 2, text: 'Isqqw Chart', introduction: '前端Echarts样式大全,前端必备1', img: getImageUrl('ppchart'), url: 'https://www.isqqw.com/#/homepage' },
    { id: 3, text: 'Chart Lib', introduction: '前端Echarts样式大全,前端必备2', img: getImageUrl('ppchart'), url: 'http://chartlib.datains.cn/echarts' },
    { id: 4, text: 'DatavGeoAtlas', introduction: '地区数据可视化数据下载平台', img: getImageUrl('areaSelector'), url: 'http://datav.aliyun.com/portal/school/atlas/area_selector' },
    { id: 5, text: 'LogicFlow', introduction: '由滴滴体验平台技术研发的一款流程图编辑框架', img: getImageUrl('logicFlow'), url: 'http://logic-flow.org/' },
    { id: 6, text: 'Vue ECharts', introduction: '百度ECharts 的 Vue.js 组件', img: getImageUrl('vueecharts'), url: 'https://vue-echarts.dev/' },
  ],
});
function getImageUrl(name: string) {
  return new URL(`/tool/${name}.png`, import.meta.url).href;
}
function toUrl(url: string) {
  window.open(url);
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  padding-bottom: 50px;
  background: var(--home-bg-color, #f5f6fb);
  padding-top: 50px;
  h3 {
    font-size: 28px;
    margin-bottom: 10px;
    margin-left: 50px;
  }
  .line {
    height: 1px;
    background: #ccc;
    margin-left: 50px;
    width: 95%;
    margin-bottom: 20px;
  }
}
.card {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(6, 1fr);
  place-items: center;
  gap: 15px;
  margin-top: 15px;
  &-item:hover {
    cursor: pointer;
    transform: scale(1.2);
  }
  &-item {
    width: 200px;
    height: 200px;
    display: grid;
    place-content: center;
    cursor: pointer;
    text-align: center;
    .logo {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      margin-top: 10px;
    }
    .title {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: var(--home-text-color, #000);
      margin-top: -10px;
    }
    .intr {
      font-weight: bold;
      color: var(--home-tips-color, #606266);
      height: 20px;
      margin-top: 20px;
      line-height: 20px;
    }
  }
}
</style>
